<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="
        filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
        <!-- 添加输入框 -->
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
        <!-- 添加输入框 -->
        <!-- 添加删除和修改按钮 -->
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="$store.state.homeview.tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />

    <TanChuang></TanChuang>
</template>
<script lang="ts" setup>
import TanChuang from '../../components/UpdateDialog.vue'
import { ref, computed } from "vue";
import { useStore } from "vuex";
// 设置需要的参数与方法

const store = useStore()

const currentPage4 = ref(1);
const pageSize4 = ref(10);
const search = ref('')
// 使用计算属性处理数据
const filterTableData = computed(() =>
    store.state.homeview.tableData.filter(
        (data: any) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
// 修改下面得方法
const handleSizeChange = (val: number) => {
    //一页显示多少条
    pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
    //页码更改方法
    currentPage4.value = val;
};

interface User {
    data: string;
    name: string;
    address: string;
}

const handleEdit = (index: number, row: User) => {
    console.log(index, row);
    store.commit("SET_DIALOG")
}

const handleDelete = (index: number, row: User) => {
    console.log(index, row);
}

</script>
<style></style>